<!DOCTYPE html>
<html lang="en" ng-app="topicApp">
<head>
    <meta charset="UTF-8">
    <title>Topics</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="web-resource/lib/bootstrap/css/bootstrap.min.css">
    <script src="web-resource/lib/jquery/jquery1.11.3.min.js"></script>
    <script src="web-resource/lib/bootstrap/js/bootstrap.js"></script>
    <script src="web-resource/lib/angular/angular.min.js"></script>
    <script src="web-resource/lib/validator/validator.min.js"></script>
    <script src="web-resource/lib/pagination/tm.pagination.js"></script>
    <!--ui-notification-->
    <link rel="stylesheet" href="web-resource/lib/notification/angular-ui-notification.css">
    <script src="web-resource/lib/notification/angular-ui-notification.js"></script>
    <!--ui-notification-->


    <!--chosen-->
    <script src="web-resource/lib/chosen/angular-chosen.js"></script>
    <link rel="stylesheet" type="text/css" href="web-resource/lib/chosen/chosen.css"/>
    <link rel="stylesheet" type="text/css" href="web-resource/lib/chosen/chosen-spinner.css"/>
    <script src="web-resource/lib/chosen/chosen.jquery.min.js"></script>
    <!--chosen-->

    <!-- datetime-picker:js -->
    <link rel="stylesheet"
          href="web-resource/lib/datatimepicker/bootstrap-datetimepicker.min.css">
    <script src="web-resource/lib/datatimepicker/moment.min.js"></script>
    <script src="web-resource/lib/datatimepicker/bootstrap-datetimepicker.min.js"></script>
    <!-- endinject -->
    <script src="web-resource/lib/datatimepicker/angular-eonasdan-datetimepicker.min.js"></script>
    <!-- datetime-picker:js -->
    <!--<link rel="stylesheet" href="web-resource/css/common.css">-->

    <!--ngDialog-->
    <link rel="stylesheet" href="web-resource/lib/ng-dialog/ngDialog.min.css">
    <link rel="stylesheet" href="web-resource/lib/ng-dialog/ngDialog-theme-default.css">
    <script src="web-resource/lib/ng-dialog/ngDialog.min.js"></script>
    <!--ngDialog-->
</head>
<body>
<ng-include src="'web-resource/template/header.tpl'"></ng-include>
<div class="container-fluid" id="deployHistoryList" ng-controller="topicController" role="main">
    <div class="modal-body">
        <div class="row">
            <form class="form-inline pull-left col-sm-10">
                <div class="form-group form-group-sm">
                    <label>主题:</label>
                    <input type="text" class="form-control" ng-model="filterStr">
                </div>
                <button class="btn btn-sm btn-primary" type="button" ng-click="openAddDialog()">增加/更新</button>
            </form>
        </div>
        <br>
        <div>
            <div class="row">
                <table class="table table-bordered">
                    <tr>
                        <th class="text-center">主题</th>
                        <th class="text-center">操作</th>
                    </tr>
                    <tr ng-repeat="topic in topicShowList">
                        <td class="text-center">{{topic}}</td>
                        <td class="text-center">
                            <button class="btn btn-sm btn-primary" type="button"
                                    ng-click="statsView(topic)">状态
                            </button>
                            <button class="btn btn-sm btn-primary" type="button"
                                    ng-click="routerView(topic)">路由
                            </button>

                            <button class="btn btn-sm btn-primary" type="button"
                                    ng-click="consumerView(topic)">consumer管理
                            </button>
                            <button class="btn btn-sm btn-primary" type="button"
                                    ng-click="openUpdateDialog(topic)">topic配置
                            </button>
                            <button class="btn btn-sm btn-primary" type="button"
                                    ng-click="openSendTopicMessageDialog(topic)">发送消息
                            </button>
                            <button class="btn btn-sm btn-danger" type="button"
                                    ng-click="openConsumerResetOffsetDialog(topic)">重置消费位点
                            </button>
                            <button class="btn btn-sm btn-danger" type="button"
                                    ng-confirm-click="确认删除?"
                                    confirmed-click="deleteTopic(topic)">删除
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
            <tm-pagination conf="paginationConf"></tm-pagination>
        </div>


    </div>
</div>
</body>
<script src="web-resource/js/topic.js?timestamp=5"></script>

<script type="text/ng-template" id="resetOffsetResultDialog">
    <div class="modal-header">
        <h4 class="modal-title">SendResult</h4>
    </div>
    <div class="modal-body ">
        <form class="form-horizontal" novalidate>
            {{ngDialogData}}
        </form>
    </div>
    <div class="modal-footer">
        <div class="ngdialog-buttons">
            <button type="button" class="ngdialog-button ngdialog-button-secondary"
                    ng-click="closeThisDialog('Cancel')">关闭
            </button>
        </div>
    </div>
</script>
<script type="text/ng-template" id="sendResultDialog">
    <div class="modal-header">
        <h4 class="modal-title">SendResult</h4>
    </div>
    <div class="modal-body ">
        <form class="form-horizontal" novalidate>
            {{ngDialogData}}
        </form>
    </div>
    <div class="modal-footer">
        <div class="ngdialog-buttons">
            <button type="button" class="ngdialog-button ngdialog-button-secondary"
                    ng-click="closeThisDialog('Cancel')">关闭
            </button>
        </div>
    </div>
    </script>
<script type="text/ng-template" id="topicModifyDialog">
    <div class="modal-header">
        <h4 class="modal-title">Topic变更</h4>
    </div>
    <div class="modal-body " ng-repeat="item in ngDialogData.topicRequestList">
        <form id="addAppForm" name="addAppForm" class="form-horizontal" novalidate>
            <div class="form-group">
                <label class="control-label col-sm-2">brokerName:</label>
                <div class="col-sm-10">
                    <select name="mySelectBrokerNameList" multiple chosen ng-disabled="ngDialogData.bIsUpdate"
                            ng-model="item.brokerNameList"
                            ng-options="brokerNameItem for brokerNameItem in ngDialogData.allBrokerNameList"
                            required>
                        <option value=""></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">topicName:</label>
                <div class="col-sm-10">
                    <input class="form-control" ng-model="item.topicName" type="text"
                           ng-disabled="ngDialogData.bIsUpdate" required/>
                    <span class="text-danger" ng-show="addAppForm.name.$error.required">编号不能为空.</span>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">writeQueueNums:</label>
                <div class="col-sm-10">
                    <input class="form-control" ng-model="item.writeQueueNums" type="text"
                           required/>
                    <span class="text-danger" ng-show="addAppForm.name.$error.required">编号不能为空.</span>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">readQueueNums:</label>
                <div class="col-sm-10">
                    <input class="form-control" ng-model="item.readQueueNums" type="text"
                           required/>
                    <span class="text-danger" ng-show="addAppForm.name.$error.required">编号不能为空.</span>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">perm:</label>
                <div class="col-sm-10">
                    <input class="form-control" ng-model="item.perm" type="text"
                           required/>
                    <span class="text-danger" ng-show="addAppForm.name.$error.required">编号不能为空.</span>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">order:</label>
                <div class="col-sm-10">
                    <input class="form-control" ng-model="item.order" type="text"
                           required/>
                    <span class="text-danger" ng-show="addAppForm.name.$error.required">编号不能为空.</span>
                </div>
            </div>
        </form>
        <div class="modal-footer">
            <div class="ngdialog-buttons">
                <button type="button" class="ngdialog-button ngdialog-button-primary"
                        ng-click="postTopicRequest(item)">提交
                </button>
                <button type="button" class="ngdialog-button ngdialog-button-secondary"
                        ng-click="closeThisDialog('Cancel')">关闭
                </button>
            </div>
        </div>
    </div>

</script>
<script type="text/ng-template" id="consumerViewDialog">
    <div class="modal-header">
        <h4 class="modal-title">{{ngDialogData.topic}}消费组</h4>
    </div>
    <div class="modal-body ">
        <form name="addAppForm" class="form-horizontal" novalidate>
            <div ng-show="ngDialogData.consumerGroupCount == 0">
                没有消费组
            </div>


            <table class="table table-bordered table-hover" ng-repeat="(consumerGroup, consumeDetail) in ngDialogData.consumerData">
                <tbody>
                <tr>
                    <td>
                        <table class="table table-bordered">
                            <tr>
                                <td><label>消费组</label></td>
                                <td>{{consumerGroup}}</td>
                                <td><label>消费延迟</label></td>
                                <td>{{consumeDetail.diffTotal}}</td>
                                <td><label>最后消费</label></td>
                                <td>{{consumeDetail.lastTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table class="table table-bordered">
                            <tr>
                                <th class="text-center">broker</th>
                                <th class="text-center">queue</th>
                                <th class="text-center">brokerOffset</th>
                                <th class="text-center">consumerOffset</th>
                                <th class="text-center">diffTotal</th>
                                <th class="text-center">lastTimestamp</th>
                            </tr>
                            <tr ng-repeat="item in consumeDetail.queueStatInfoList">
                                <td class="text-center">{{item.brokerName}}</td>
                                <td class="text-center">{{item.queueId}}</td>
                                <td class="text-center">{{item.brokerOffset}}</td>
                                <td class="text-center">{{item.consumerOffset}}</td>
                                <td class="text-center">{{item.brokerOffset-item.consumerOffset}}</td>
                                <td class="text-center">{{item.lastTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}
                                </td>
                        </table>
                    </td>
                </tr>
                </tbody>
            </table>
        </form>
    </div>
    <div class="modal-footer">
        <div class="ngdialog-buttons">
            <button type="button" class="ngdialog-button ngdialog-button-secondary"
                    ng-click="closeThisDialog('Cancel')">关闭
            </button>
        </div>
    </div>
</script>
<script type="text/ng-template" id="consumerResetOffsetDialog">
    <div class="modal-header">
        <h4 class="modal-title">{{topic}}重置消息位点</h4>
    </div>
    <div class="modal-body">
        <form class="form-horizontal" novalidate>
            <div class="form-group">
                <label class="control-label col-sm-2">消费组:</label>
                <div class="col-sm-10">
                    <select name="mySelect" multiple chosen
                            ng-model="ngDialogData.selectedConsumerGroup"
                            ng-options="item for item in ngDialogData.allConsumerGroupList"
                            required>
                        <option value=""></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">时间点:</label>
                <div class="col-sm-10">
                    <div class="input-group">
                        <input class="form-control" datetimepicker ng-model="timepicker.date"
                               options="timepicker.options"/>
                        <span class="input-group-addon"><span
                                class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <div class="ngdialog-buttons">
            <button type="button" class="ngdialog-button ngdialog-button-primary"
                    ng-click="resetOffset()">重置
            </button>
            <button type="button" class="ngdialog-button ngdialog-button-secondary"
                    ng-click="closeThisDialog('Cancel')">关闭
            </button>
        </div>
    </div>
</script>

<script type="text/ng-template" id="statsViewDialog">
    <div class="modal-header">
        <h4 class="modal-title"> {{ngDialogData.topic}}状态</h4>
    </div>
    <div class="modal-body ">
        <table class="table table-bordered">
            <tr>
                <th class="text-center">queue</th>
                <th class="text-center">minOffset</th>
                <th class="text-center">maxOffset</th>
                <th class="text-center">lastUpdateTimestamp</th>

            </tr>
            <tr ng-repeat="(queue,info) in ngDialogData.statsData.offsetTable">
                <td class="text-center">{{queue}}</td>
                <td class="text-center">{{info.minOffset}}</td>
                <td class="text-center">{{info.maxOffset}}</td>
                <td class="text-center">{{info.lastUpdateTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}</td>
            </tr>
        </table>
    </div>
    <div class="modal-footer">
        <div class="ngdialog-buttons">
            <button type="button" class="ngdialog-button ngdialog-button-secondary"
                    ng-click="closeThisDialog('Cancel')">关闭
            </button>
        </div>
    </div>
</script>
<!--路由查看窗口-->
<script type="text/ng-template" id="routerViewDialog">
    <div class="modal-header">
        <h4 class="modal-title"> {{ngDialogData.topic}}路由</h4>
    </div>
    <div class="modal-body ">

        <table class="table table-bordered table-hover">
            <tbody>
            <tr>
                <td>brokerDatas:</td>
                <td>
                    <table class="table table-bordered table-hover"
                           ng-repeat="item in ngDialogData.routeData.brokerDatas">
                        <tr>
                            <td>brokerName:</td>
                            <td>
                                <!--<div class="col-sm-6">-->
                                    {{item.brokerName}}
                                <!--</div>-->
                                <!--<div class="col-sm-6">-->
                                    <!--<div class="ngdialog-buttons">-->
                                        <!--<button type="button" class="ngdialog-button ngdialog-button-primary"-->
                                                <!--ng-confirm-click="确认删除?"-->
                                                <!--confirmed-click="deleteTopicByBroker(item)">DELETE-->
                                        <!--</button>-->
                                    <!--</div>-->
                                <!--</div>-->
                            </td>
                        </tr>
                        <tr>
                            <td>brokerAddrs:</td>
                            <td>
                                <table class="table table-bordered table-hover">
                                    <tr ng-repeat="(index,address) in item.brokerAddrs">
                                        <td>{{index}}</td>
                                        <td>{{address}}</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>queueDatas:</td>
                <td>
                    <table class="table table-bordered table-hover"
                           ng-repeat="item in ngDialogData.routeData.queueDatas">
                        <tr>
                            <td>brokerName</td>
                            <td>{{item.brokerName}}</td>
                        </tr>
                        <tr>
                            <td>readQueueNums</td>
                            <td>{{item.readQueueNums}}</td>
                        </tr>
                        <tr>
                            <td>writeQueueNums</td>
                            <td>{{item.writeQueueNums}}</td>
                        </tr>
                        <tr>
                            <td>perm</td>
                            <td>{{item.perm}}</td>
                        </tr>
                    </table>
                </td>
            </tr>
            </tbody>
        </table>

    </div>
    <div class="modal-footer">
        <div class="ngdialog-buttons">
            <button type="button" class="ngdialog-button ngdialog-button-secondary"
                    ng-click="closeThisDialog('Cancel')">关闭
            </button>
        </div>
    </div>

</script>

<!--删除主题窗口-->
<script type="text/ng-template" id="deleteTopicDialog">
    <div>
        <div>
            <md-toolbar md-scroll-shrink="">
                <div class="md-toolbar-tools">
                    {{ngDialogData.topic}}删除主题
                </div>
            </md-toolbar>
            <md-content>
                <md-card>

                </md-card>
                <div class="ngdialog-buttons">
                    <button type="button" class="ngdialog-button ngdialog-button-secondary"
                            ng-click="closeThisDialog('Cancel')">关闭
                    </button>
                </div>
            </md-content>
        </div>
    </div>
</script>

<!--发送自定义消息窗口-->
<script type="text/ng-template" id="sendTopicMessageDialog">

    <div class="modal-header">
        <h4 class="modal-title">发送[{{ngDialogData.topic}}]Message</h4>
    </div>
    <div class="modal-body ">
        <form class="form-horizontal" novalidate>

            <div class="form-group">
                <label class="control-label col-sm-2">Topic:</label>
                <div class="col-sm-10">
                    <input class="form-control" name="name" ng-model="sendTopicMessage.topic" type="text"
                           disabled/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">Tag:</label>
                <div class="col-sm-10">
                    <input class="form-control" name="name" ng-model="sendTopicMessage.tag" type="text"
                           ng-disabled/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">Key:</label>
                <div class="col-sm-10">
                    <input class="form-control" name="name" ng-model="sendTopicMessage.key" type="text"
                           ng-disabled/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">Message body:</label>
                <div class="col-sm-10">
                                                <textarea class="form-control" name="name"
                                                          ng-model="sendTopicMessage.messageBody"
                                                          style="max-height:200px;min-height:200px; resize: none"
                                                          ng-disabled></textarea>
                </div>
            </div>

        </form>
    </div>
    <div class="modal-footer">
        <div class="ngdialog-buttons">
            <button type="button" class="ngdialog-button ngdialog-button-primary"
                    ng-click="send()">发送
            </button>
            <button type="button" class="ngdialog-button ngdialog-button-secondary"
                    ng-click="closeThisDialog('Cancel')">关闭
            </button>
        </div>
    </div>
</script>
</html>

